<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>拖拽读取xlsx的Demo - 天明</title>
	<script type="text/javascript" src="//cdn.jsdelivr.net/npm/xlsxread@1.1.2/dist/xlsxread.min.js"></script>
	<script src="//libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	<style type="text/css">
		.share {
			width: 300px;
			height: 300px;
			background: #fff;
			box-shadow: 0 0 2px #ddd;
			text-align: center;
			border: 2px solid #dddddd;
			Justify-content: center;
			align-items: center;
			display: flex;
		}
		.hover {
			border: 2px dashed #aaaaaa;
		}
		#val{
			display: none;
		}
	</style>
</head>
<body>
<div class="share">
	拖动xlsx文件到此处
</div>
<div class="info" style="margin-bottom:20px;margin-top:20px; font-size:14px">
	此包已经更新到npm拉!
	<a href="https://www.npmjs.com/package/xlsxread" target="_blank">查看详情!</a>
	<br>
	<span style="color:red">如果读取失败或者结果为空,请检查工作表的Sheet名称是否有误,默认读取: Sheet1</span>
</div>
<div class="total" style="margin-top:20px;"></div>
<div class="iner" style="margin-top:20px;">
	<textarea id="val" style="width:300px;height:300px"></textarea>
</div>
</body>
<script>
	$(function () {
		let share = $('.share');
		$(document).on({
			dragleave:function(e){    //拖离
				share.removeClass('hover');
				e.preventDefault();
			},
			drop:function(e){  //拖后放
				share.removeClass('hover');
				e.preventDefault();
			},
			dragenter:function(e){    //拖进
				share.addClass('hover');
				share.text('拖过来.把手松开...');
				e.preventDefault();
			},
			dragover:function(e){    //拖来拖去
				share.addClass('hover');
				e.preventDefault();
			}
		});
		document.querySelector('.share').addEventListener('drop', function (e) {
			e.preventDefault(); //取消默认浏览器拖拽效果
			var fileList = e.dataTransfer.files; //获取文件对象
			share.text('已经收到文件,正在解析中...');
			var startTime = new Date().getTime();
			// 传入文件及表格的sheet名称(必填);
			// TODO 注意: 这里必须传入表格的 sheet 名称
			window.xlsxRead.readJson(fileList[0], 'Sheet1').then(function (list) {
				var endTime = new Date().getTime();
				var iner = $('#val');
				iner.show();
				iner.val(JSON.stringify(list,null,2));
				share.html(`读取完成<br/>前文件共有${list.length}条数据<br/>解析共耗时${endTime-startTime}ms`);
			}).catch(function (err) {
				alert(err);
				share.text('读取失败了,请重新拖拽');
			})
		}, false)
	})
</script>
</html>
